<template>
  <div class="logincontainer">
    <el-form
      class="loginForm"
      :model="loginModel"
      ref="loginFormRef"
      size="large"
      :rules="rules"
      :inline="false"
    >
      <el-form-item>
        <div class="loginTitle">系统登录</div>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入账户"
          v-model="loginModel.username"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入密码"
          v-model="loginModel.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 需要添加宽度的样式，否则样式会显示不全 -->
        <el-row :gutter="0" style="width:100%;">
          <el-col :span="16">
            <el-input
              placeholder="请输入验证码"
              v-model="loginModel.code"
            ></el-input>
          </el-col>
          <!-- 元素中间的间隔可以使用col元素来实现 -->
          <el-col :span="1"></el-col>
          <el-col :span="7">
            <img :src="imgSrc" @click="getImage" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item style="margin-top: 0px;">
        <el-row :gutter="0" style="width:100%;">
          <el-col :span="11">
            <el-button class="mybtn" type="primary" size="large" @click="login"
              >登录</el-button
            >
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-button class="mybtn" size="large">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
// 引入关于验证码图片的操作，获取验证码，以及验证码的图片地址 （跟页面有关的辅助性操作）
import useImage from '@/composables/login/useImage'
// 引入表单的数据，绑定表单使用，还有表单的验证信息（跟表单数据有关的操作）
import useBaseLogin from '@/composables/login/useBaseLogin'
// 引入登录的具体代码，就是表单验证和登录请求的发送 （跟页面逻辑有关的操作）
import useLogin from '@/composables/login/useLogin'
const { imgSrc, getImage } = useImage()
// 登录基础数据，包括整个表单的ref值
const { loginModel, rules, loginFormRef } = useBaseLogin()
// 登录提交
const { login } = useLogin(loginModel, loginFormRef)
</script>
<style scoped lang="scss">
.logincontainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginForm {
    height: 320px;
    width: 400px;
    border-radius: 10px;
    padding: 20px 35px;
    box-shadow: 0 0 25px #cac6c6;
    .loginTitle {
      width: 100%;
      font-size: 24px;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 100%;
      height: 75%;
    }
    .mybtn {
      width: 100%;
    }
  }
}
</style>
